import { action, observable } from "mobx";
import { GamingStore, WordData } from "../../core/store/GamingStore";
import { observer, react, reactor, render } from "../../mobx/observer";


const { ccclass, property } = cc._decorator;
@ccclass
@observer
export default class SelectedWordItem extends cc.Component {
    @observable
    wordInfo: WordData;

    @property({ type: cc.Label, tooltip: '文字' })
    lab_word: cc.Label = null;


    _btn: cc.Button;
    onLoad() {
        this.initEvent();
    }
    initEvent() {
        this._btn = this.node.getComponent(cc.Button);
        this._btn.node.on(cc.Node.EventType.TOUCH_END, this.onWordClick, this);
    }
    @action
    onWordClick() {
        if (!this.wordInfo) return
        let isSelected = this.wordInfo.selected;
        if (isSelected) {
            this.wordInfo.selected = false;
            let idx = this.getIdxInselectedWords;
            GamingStore.Ins.selectedWords.splice(idx, 1);
            GamingStore.Ins.allLevelWords[this.wordInfo.idx] = this.wordInfo;
        }
    }

    get getIdxInselectedWords() {
        let idx = -1;
        for (let i = 0; i < GamingStore.Ins.selectedWords.length; i++) {
            const wordInfo = GamingStore.Ins.selectedWords[i];
            if (wordInfo.idx == this.wordInfo.idx) {
                idx = i;
                break;
            }
        }
        return idx;
    }

    setData(word: WordData) {
        this.wordInfo = word;
        this.lab_word.string = word.key;
    }

    @render
    renderSelf() {
        if (this.wordInfo) {
            this._btn.interactable = this.wordInfo.selected;
        }
    }

}